<template>
	<div ref="buttonRef" class="cursor-pointer" @click="clickSlectButton('type')">
		{{ props.title }}
		<img v-if="popoverIson" class="inline-block ml5 vertical-align-initial" src="/@/assets/icons/drop-down.svg" />
		<img v-else class="inline-block ml5 vertical-align-initial" src="/@/assets/icons/drop-down-gray.svg" />
	</div>
	<el-popover
		:visible="popoverIson"
		popper-class="popover-box"
		:ref="popoverRef"
		virtual-triggering
		:virtual-ref="buttonRef"
		placement="bottom"
		trigger="click"
		:hide-after="0"
	>
		<div class="popover-option">
			<ul>
				<li v-for="(item, index) in typeDict" :key="index" @click="chooseItem(item)">{{ item }}</li>
			</ul>
		</div>
	</el-popover>
</template>

<script setup lang="ts" name="headPopover">
// 定义子组件向父组件传值/事件
const emit = defineEmits(['getItem']);
// 定义父组件传过来的值
const props = defineProps({
	title: {
		type: String,
		default: () => '',
	},
});
const popoverIson = ref(false); // pop显隐控制
const buttonRef = ref(); // 图标按钮ref
const popoverRef = ref(); //弹框ref
const typeDict = ref(['点', '线', '面', '栅格图层']); // 数据类型字典
// 图标点击事件
const clickSlectButton = (type: String) => {
	popoverIson.value = !popoverIson.value;
	switch (type) {
		case 'type':
			nextTick(() => {
				unref(popoverRef)?.popoverRef?.delayHide?.();
			});
			break;
	}
};
// 点击触发选择
const chooseItem = (item: any) => {
	popoverIson.value = false;
	emit('getItem', item);
};
</script>
